<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>排序</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <style>
            body{text-align: center;}
            table tr{text-align: center;}
            input{margin:10px;}
        </style>
        <script>
            window.onload = function() {
                var oBtn = document.getElementById("btn1");
                var oTable = document.getElementById("tb");
                var oTr = oTable.tBodies[0].rows;
                var arr = [];
                oBtn.onclick = function() {
                    for (var i = 0; i < oTr.length; i++) {
                        arr[i] = oTr[i];
                    }
                    arr.sort(function(oTr1, oTr2) {
                        n1 = parseInt(oTr1.cells[0].innerHTML);
                        n2 = parseInt(oTr2.cells[0].innerHTML);
                        return n1 - n2;
                    });
                    for (var j = 0; j < arr.length; j++) {
                        oTable.tBodies[0].appendChild(arr[j]);
                    }
                };
            };
        </script>
    </head>
    <body>
        <input id="btn1" type="button" value="排序"/>
        <table id="tb" border="1" width="500" align="center">
            <thead>
                <tr>
                    <td>编号</td>
                    <td>姓名</td>
                    <td>年龄</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>4</td>
                    <td>张生</td>
                    <td>23</td>
                    <td><a href="javascript:">删除</a></td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>李四</td>
                    <td>25</td>
                    <td><a href="javascript:">删除</a></td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>王五</td>
                    <td>65</td>
                    <td><a href="javascript:">删除</a></td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>孙一</td>
                    <td>3</td>
                    <td><a href="javascript:">删除</a></td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>李静</td>
                    <td>73</td>
                    <td><a href="javascript:">删除</a></td>
                </tr>
            </tbody>
        </table>
    </body>
</html>
